// 从 Vue Router 导入 createRouter 和 createWebHistory 方法
import { createRouter, createWebHistory } from 'vue-router'

// 导入页面组件
import Home from '../pages/Home.vue' // 首页组件
import BookDetail from '../pages/BookDetail.vue' // 书籍详情页组件

// 定义路由规则
const routes = [
    {
        path: '/', // 路由路径：根路径对应首页
        name: 'Home', // 路由名称
        component: Home // 组件：渲染 Home 组件
    },
    {
        path: '/book/:id', // 路由路径：动态路由，匹配书籍详情页，:id 为动态参数
        name: 'BookDetail', // 路由名称
        component: BookDetail, // 组件：渲染 BookDetail 组件
        props: true // 将路由参数作为 props 传递给组件
    }
]

// 创建路由实例
const router = createRouter({
    history: createWebHistory(), // 使用 HTML5 History 模式
    routes // 使用上面定义的路由规则
})

// 导出路由实例，供应用挂载时使用
export default router
